<template>
    <div class="forgot b-f">
        <div class="title">
            <img
                src="https://qbb-public-read.oss-cn-shanghai.aliyuncs.com/customer/app/431/logo/logo_ayf.png"
                alt=""
            />
        </div>
        <div class="slogan">
            <div class="left">
                <div class="second">找回密码</div>
            </div>
        </div>
        <div class="content">
            <van-form>
                <van-field
                    name="phone"
                    v-model="phone"
                    clearable
                    placeholder="请输入手机号"
                    maxlength="11"
                    :rules="[
                        { required: true, message: '请填写手机号' },
                        {
                            validator: validatorPhone,
                            message: '请输入有效的手机号',
                        },
                    ]"
                >
                    <template slot="left-icon">
                        <img
                            src=""
                            alt=""
                        />
                    </template>
                </van-field>
                <van-field
                    v-model="code"
                    name="code"
                    placeholder="请输入验证码"
                >
                    <template slot="left-icon">
                        <img
                            src=""
                            alt=""
                        />
                    </template>
                    <template slot="right-icon">
                        <span class="code disable"> 获取验证码 </span>
                    </template>
                </van-field>
                <van-field
                    v-model="password"
                    name="password"
                    placeholder="密码长度8-12位，字母+数字"
                    :type="passwordType"
                >
                    <template slot="left-icon">
                        <img
                            src=""
                            alt=""
                        />
                    </template>
                    <template slot="right-icon">
                        <span class="solts" @click="switchPasswordType">
                            <van-icon
                                name="eye-o"
                                size="18"
                                v-if="passwordType === 'text'"
                            />
                            <van-icon size="18" name="closed-eye" v-else />
                        </span>
                    </template>
                </van-field>
                <van-field
                    v-model="password2"
                    name="password"
                    placeholder="请再次输入密码"
                    :type="passwordType2"
                >
                    <template slot="left-icon">
                        <img
                            src=""
                            alt=""
                        />
                    </template>
                    <template slot="right-icon">
                        <span class="solts" @click="switchPasswordType2">
                            <van-icon
                                name="eye-o"
                                size="18"
                                v-if="passwordType2 === 'text'"
                            />
                            <van-icon size="18" name="closed-eye" v-else />
                        </span>
                    </template>
                </van-field>
            </van-form>
            <van-button
                class="login-btn active"
                :loading="loading"
                type="primary"
                loading-type="spinner"
                loading-text="确认找回"
                 @click="onRetrieve"
                >确认找回</van-button
            >
            <div class="others-login">手机号已不使用，无法获取验证码</div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [], // 父辈向子辈传参
        name: 'forgot',
        components: { // 组件的引用

        },
        data() {
            return {
                phone: '',
                code: '',
                password: '',
                password2: '',
                loading: false,
                wechatBtn: false,
                checked: false,
                passwordType: 'password',
                passwordType2: 'password',
            }
        },
        methods: {
            goPassword() {
                this.$router.push("/login-pwd");
            },
            goCode() {
                this.$router.push("/login-code");
            },
            switchPasswordType() {
                this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
            },
            switchPasswordType2() {
                this.passwordType2 = this.passwordType2 === 'password' ? 'text' : 'password'
            },
            validatorPhone(val) {
                return /^1[3456789]\d{9}$/.test(val)
            },
            onRetrieve(){
                
            }
        },
        computed: {},
        watch: {},
        created() { },
        mounted() {
        },
    }
</script>
    
<style scoped lang='scss'>
    .forgot {
        min-height: 100vh;
        padding: 0 30px;
        .title {
            padding: 20px 0 0;
            & > img {
                width: 60px;
                height: 60px;
                border-radius: 4px;
            }
        }
        .slogan {
            font-size: 23px;
            font-weight: 500;
            color: #000;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            .right {
                font-size: 14px;
                font-weight: 400;
                color: #f24b3a;
            }
        }
        .content {
            text-align: center;
            margin-top: 40px;
            .van-cell {
                margin-bottom: 15px;
                text-align: left;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
                padding: 0;
            }

            .van-field__left-icon > img {
                display: block;
                height: 25px;
                width: 25px;
                object-fit: contain;
            }
            .code {
                line-height: 54px;
                height: 100%;
                font-size: 14px;
                font-weight: 500;
                color: #f24b3a;
                word-break: keep-all;
                box-sizing: content-box;
            }
            .disable {
                color: #999;
            }
            ::v-deep .van-field__body {
                height: 54px;
                line-height: normal;
                padding: 0 20px 0 8.5px;
                flex: 1;
                font-size: 17px;
                box-sizing: border-box;
                .van-field__control::-webkit-input-placeholder {
                    font-size: 15px;
                    font-weight: 400;
                    color: #c6c6c6;
                }
            }
            .login-btn {
                width: 315px;
                height: 50px;
                background: rgba(242, 75, 58, 0.4);
                border-radius: 24px;
                line-height: 50px;
                font-size: 17px;
                font-weight: 500;
                color: #fff;
                margin-top: 50px;
                border: none;
            }
            .active {
                background: #f24b3a;
            }

            .others-login {
                font-size: 13px;
                font-weight: 400;
                color: #f24b3a;
                margin-top: 70px;
                padding-bottom: 36px;
            }
        }
    }
</style>